<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
    节点的动态操作
    1. 添加节点
    2. 修改节点
    3. 删除节点
-->
<ul>
    <li>芜湖市</li>
</ul>

<script>
    // 1.创建节点对象
    var li = document.createElement('li')
    // console.log(li)  //  object
    // console.log(typeof li)  //  object

    // 2. 插入节点内容    创建文本对象
    var text = document.createTextNode('蚌埠市')
    li.appendChild(text)
    console.log(li)

    // 获取父节点对象
    var ul = document.getElementsByTagName('ul')[0]
    ul.appendChild(li)   // 追加节点


    var hf_li = document.createElement('li')
    hf_li.innerText = '合肥市'
    console.log(hf_li)

    var wh_li = document.querySelector('ul>li:first-child')
    //将指定节点添加到已有节点前  参数1  新节点  参数2 参照节点
    // ul.insertBefore(hf_li,wh_li)

    //替换节点  参数1  新节点  参数2  需要替换的节点
    // ul.replaceChild(hf_li,wh_li)

    //删除节点
    ul.removeChild(wh_li)



</script>


</body>
</html>